<template>
	<view class="page">
		<view class="search">
			<!-- 项目（订单）展示 -->
			<view class="dd" @click="toOrders">
				<!-- <u-text class="text" suffixIcon="arrow-down" align="center" :text="order" @click="toOrders"></u-text> -->
				<uni-data-select class="text" v-model="order.name" :placeholder="order.name" disabled></uni-data-select>
			</view>
			<view class="ss">
				<!-- <u-input placeholder="请输入站点名称" v-model="search.name" @change="change1" clearable></u-input> -->
				<uni-easyinput v-model="search.name" placeholder="请输入站点名称" @change="change1" clearable></uni-easyinput>
				<!-- <uni-search-bar @confirm="change1" :focus="true" v-model="search.name"  @input="change1" @clear="clear" cancelButton="none">
				</uni-search-bar> -->
			</view>
			<view class="ss">
				<uni-data-select v-model="search.type" placeholder="请选择设备类型" :localdata="types"
					@change="change2"></uni-data-select>
			</view>
			<view class="ss1">
				<uni-data-select v-model="search.dir" placeholder="请选择站点位置" :localdata="dirs"
					@change="change3"></uni-data-select>
			</view>
			<view class="ss">
				<uni-data-select v-model="search.online" placeholder="请选择上下线类型" :localdata="onlines"
					@change="change4"></uni-data-select>
			</view>
		</view>
		<view class="wrap">
			<!-- 上拉加载 -->
			<zb-table :columns="column" :data="datas" :stripe="true" :fit="false" :border="true"
				:show-header="true"></zb-table> <!-- :isShowLoadMore="true" :pullUpLoading="loadingData" -->
			<u-loadmore :status="status" :loadmoreText="loadmoreText" @loadmore="loadmore" />
		</view>
	</view>
</template>

<script>
	import {
		iplog
	} from '@/api/common.js';
	import {
		getTreeJsonByCode
	} from '@/api/common.js';
	export default {
		data() {
			return {
				search: {
					name: '',
					type: '',
					dir: '',
					online: 0,
				}, //查询的参数
				types: [],
				onlines: [{
						value: 1,
						text: "上线"
					},
					{
						value: 2,
						text: "下线"
					}
				],
				dirs: [{
						value: '路东',
						text: "路东"
					},
					{
						value: '路西',
						text: "路西"
					},
					{
						value: '路南',
						text: "路南"
					},
					{
						value: '路北',
						text: "路北"
					},
				],
				order: {
					id: '0',
					name: '订单1'
				},
				status: 'loadmore',
				loadmoreText: '点击加载更多',
				id: '',
				page: 0,
				pageCount: 10,
				column: [{
						name: 'name',
						label: '站点',
						fixed: false,
						width: 100,
						type: 'wrap',
						emptyString: '--'
					}, {
						name: 'dir',
						label: '位置',
						fixed: false,
						width: 60,
						emptyString: '--'
					},
					{
						name: 'type',
						label: '类型',
						sorter: false,
						width: 60,
						align: 'right',
					},
					{
						name: 'time',
						label: '时间',
						width: 140,
						sorter: false
					}
				],
				datas: []
			}

		},
		onShow() {
			uni.hideTabBar({})
			let that = this
			uni.$on('order', function(data) {
				console.log('监听到事件来自 testdata ，携带参数为：' + JSON.stringify(data));
				if (that.order.id != data.id) {
					console.log('订单修改....')
					that.order = data
					that.toSearch();
				}
			})
		},
		onLoad(option) {
			console.log("onLoad:")
			uni.getStorage({
				key: 'order',
				success: (e) => {
					this.order = e.data
					this.device_types();
					this.toSearch();
				}
			})
			uni.showToast({
				title: '请先选择订单',
				icon: 'none'
			});
		},
		onReachBottom() {
			this.status = 'loading';
			console.log('触发上拉加载：' + this.status)
			this.page++;
			this.toSearch();
		},
		methods: {
			loadmore() {
				console.log('触发加载：' + this.status)
				this.page++;
				this.toSearch();
			},
			toOrders() {
				console.log('准备跳转项目列表页面')
				uni.navigateTo({
					url: '/pages/order_select/order_select'
				})
			},
			//获取设备类型
			device_types() {
				getTreeJsonByCode({
					code: "DeviceType"
				}).then(res => {
					console.log(res);
					if (res.length > 0) {
						this.types = []
						res.forEach(item => {
							//forEach循环
							this.types.push({
								value: item.id,
								text: item.value
							})
						});
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			change1(e) {
				console.log("站名：" + e + "--" + this.search.name)
				this.page = 0;
				this.datas = [];
				this.toSearch();
			},
			change2(e) {
				console.log("類型：" + e + "--" + this.search.type)
				this.search.type = e
				this.page = 0;
				this.datas = [];
				this.toSearch();
			},
			change3(e) {
				console.log("请选择站点位置：" + e + "--" + this.search.dir)
				this.search.dir = e
				this.page = 0;
				this.datas = [];
				this.toSearch();
			},
			change4(e) {
				console.log("请选择上下线类型：" + e + "--" + this.search.online)
				this.page = 0;
				this.datas = [];
				this.toSearch();
			},
			//查詢列表
			toSearch() {
				console.log(this.search.name + "--" + this.search.type + "--" + this.order.id)
				// var that = this;
				iplog({
					page: this.page,
					size: this.pageCount,
					name: this.search.name,
					// code:this.order.code,
					projectid: this.order.id,
					terminalType: this.search.type,
					online: this.search.online,
					dir: this.search.dir
					//設備位置、類型、上下線
				}).then(res => {
					console.log(res);
					if (res.length > 0) {
						this.datas.push.apply(this.datas, res);
					}
					if (res.hasNext == false) {
						this.status = 'nomore';
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		@include flex();
		margin-top: 16rpx;
		height: 180rpx;
		flex-wrap: wrap; //正常换行

		.dd {
			width: 24vw;
			// height: 100%;
			// @include flex(center, center);

			// .text {
			// 	width: 100%;
			// 	text-align: left;
			// 	vertical-align: center;
			// }
		}

		.ss {
			width: 35vw;
			margin-left: 4rpx;
		}

		.ss1 {
			//第二行第一个
			width: 35vw;
		}
	}

	.wrap {
		padding-top: 24rpx;
	}
</style>